
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
}

*{margin:0;padding:0;}
a{outline:none;text-decoration:none;border:none;list-style:none}
center{margin:0 auto;}
body{
width:100%;
 background-color:#000;
   background-position: 50% 50%;
font-weight:100px;text-shadow:0px 1px 2px #000;
overflow-x:hidden;font-size:20pt;text-transform:uppercase;font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
-webkit-touch-callout: none !important;
			-webkit-user-select: none !important;
			-moz-user-select: none !important;
			-ms-user-select: none !important;
			-o-user-select: none !important;
			user-select: none !important;
}
img{outline:none;border:none}

.warpper{width:100%;float:left;clear:both}
.layout{position:fixed;width:100%;height:100%;background-color:#222;top:0;left:0;opacity:0}
.empty{width:100%;height:180px;float:left;clear:both}
.banner{width:100%;margin:0;border-radius:50%;}
.banner>p{position:absolute;padding:40px 0px 0px 30px;font-size:17px;color:#aaa;text-shadow:0px 1px 5px #000;}
.banner>p:hover{color:#fff}

span.reference1{position:fixed;left:0px;bottom:0px;background:#b00;width:100%;text-align:left;box-shadow:0px 1px 2px #000;z-index:9999;opacity:0.9;
	background-image: -o-linear-gradient(to top, #700 0%, #d00 100%);
	background-image: -moz-linear-gradient(to top, #700 0%, #d00 100%);
	background-image: -webkit-linear-gradient(to top,#700 0%, #d00 100%);
	background-image: -ms-linear-gradient(to top, #700 0%, #d00 100%);
	background-image: linear-gradient(to top,#700 0%, #d00 100%);
}			
span.reference1 a{color:#ccc;text-transform:uppercase;text-decoration:none;font-size:17px !important;padding:10px !important;z-index:9999;text-shadow:1px 1px 1px #222;-webkit-animation: appear 0.6s ease-in-out 0.5s backwards;-moz-animation: appear 0.6s ease-in-out 0.5s backwards;}
span.reference1 a:hover{color:#fff;}
			
.important{z-index:100 !important;}
.notimportant{z-index:-2 !important;}
.display{display:block !important;z-index:100;}
.nonedisplay{display:none !important;}

.header2{position:fixed;top:0;left:0;width:100%;background-color:#a00;padding:10px 0px 10px 100px;box-shadow:1px 1px 5px #000}
.header2>a{padding:10px 20px 10px 20px;color:#ccc;font-size:15px;z-index:1000;font-weight:400;text-shadow:0px 1px 1px #000;-webkit-animation: appear 0.6s ease-in-out 0.5s backwards;-moz-animation: appear 0.6s ease-in-out 0.5s backwards;}
.header2>a:hover{color:#000}
.notice-notproduct{margin:0;box-shadow:1px 1px 10px #000;text-shadow:1px 1px 3px #000;position:relative;font-size:20px;padding:30px 60px;background-color:#222;color:#af4;font-size:800;
	-webkit-transition: color 1s linear;
	-moz-transition: color 1s linear;
	-o-transition: color 1s linear;
	-ms-transition: color 1s linear;
	transition: color 1s linear;
}
.menuchuyenmuc{margin:20px;position:relative;width:600px;color:#fff;-webkit-animation: appear 0.6s ease-in-out 0.5s backwards;-moz-animation: appear 0.6s ease-in-out 0.5s backwards;}
.menuchuyenmuc>a{margin:4px;color:#ccc;padding:8px 20px;text-shadow:1px 3px 6px #000;box-shadow:1px 3px 12px #000;border:6px solid #ccc;font-size:18px;}
.menuchuyenmuc>a:hover{color:#ddd;border:6px solid #ddd;text-decoration:underline}
.wrapper>center>a{position:absolute;top:110px;color:#f00;font-size:90px;width:100%;left:0;-webkit-animation: appear 0.6s ease-in-out 0.5s backwards;-moz-animation: appear 0.6s ease-in-out 0.5s backwards;}
.notice-notproduct:hover{
	transform: rotate(-190deg);
    -moz-transform: rotate(-190deg);
    -webkit-transform: rotate(-190deg);
    -o-transform: rotate(-190deg);
    -ms-transform: rotate(-190deg);
	color:#f00;
	-webkit-transition: color 2s linear;
	-moz-transition: color 2s linear;
	-o-transition: color 2s linear;
	-ms-transition: color 2s linear;
	transition: color 2s linear;
}
#cuahang{z-index:999;margin:0;padding:0;width:100%;float:left;position:absolute;}
.tooltipshow>a{background-color:#f00;padding:10px 15px;box-shadow:0px 2px 2px #000;border-radius:1px;}
.tooltipshow>a>span{color:#eee;text-shadow:0px 1px 1px #000;}

#sanpham{width:100%;float:left;}
#indeximg{overflow:hidden;-webkit-animation: appear 1s ease-in-out 1 backwards;-moz-animation: appear 1s ease-in-out 1s backwards;}
#home{display:none}
#showproducts{position:relative;padding-top:0;text-align:center;z-index:99;width:1130px;-webkit-animation: appear 0.6s ease-in-out 0.5s backwards;-moz-animation: appear 0.6s ease-in-out 0.5s backwards;}
#bottom{position:fixed;bottom:0px;text-align:center;height:50px;width:100%;z-index:9990;box-shadow:1px 5px 6px #000;background:transparent url('img.png');}
#top-head{position:fixed;width:100%;height:70px;background-color:#a00;/*#424d71*/;top:0px;left:0;z-index:999998;}
#top-head2{position:fixed;width:100%;height:40px;background-color:#000;/*#424d71*/;top:70px;left:0;z-index:999997;
		background-image: -o-linear-gradient(to top, rgba(17,17,22,0.9) 0%, #a00 100%);
	background-image: -moz-linear-gradient(to top, rgba(17,17,22,0.9) 0%, #a00 100%);
	background-image: -webkit-linear-gradient(to top,  rgba(17,17,22,0.9) 0%, #a00 100%);
	background-image: -ms-linear-gradient(to top,  rgba(17,17,22,0.9) 0%, #a00 100%);
	background-image: linear-gradient(to top,rgba(17,17,22,0.9) 0%, #a00 100%);
}
#bannershopping365-content{position:relative;width:1000px;padding-top:10px;text-align:left;}
#bannershopping365-content>span>a{font-size:70px;color:#ccc;text-shadow:0px 1px 3px #000;padding-left:30px}
#bannershopping365-content>span>a:hover{color:#eee}
#bannershopping365-content>span>b{padding:0}
#bannershopping365-content>span>b>a{font-size:20px !important;color:#ccc;text-shadow:0px 1px 3px #000;}
#bannershopping365-content>span>b>a:hover{color:#fff;}
#content-top-head{width:1000px;padding:5px 0px 5px 0px;text-align:left;}
#content-top-head>a{font-size:16px;color:#ffe;text-shadow:0px 1px 2px #000;}
#content-top-head>a:hover{color:#fff;text-decoration:underline}
#bottom-head{position:fixed;width:100%;height:80px;background-color:#000;/*#424d71;*/bottom:0px;left:0;z-index:9999999;
		background-image: -o-linear-gradient(to top, rgba(17,17,22,0.5) 0%, #a00 100%);
	background-image: -moz-linear-gradient(to top, rgba(17,17,22,0.5) 0%, #a00 100%);
	background-image: -webkit-linear-gradient(to top, rgba(17,17,22,0.5) 0%, #a00 100);
	background-image: -ms-linear-gradient(to top, rgba(17,17,22,0.5) 0%, #a00 100%);
	background-image: linear-gradient(to top,rgba(17,17,22,0.5) 0%, #a00 100%);
}
#bottom-head-content{padding:23px;width:1000px;text-align:left;margin:0px;}
#bottom-head-content>a{padding-left:20px;font-size:24px;color:#ccc;text-shadow:0px 1px 2px #000}
#bottom-head-content>a>b:hover{color:#eee;text-decoration:underline}
#bannershopping365{z-index:9999;padding-top:90px;position:absolute;width:100%;-webkit-animation: appear 0.8s ease-in-out 0.8s backwards;-moz-animation: appear 0.8s ease-in-out 0.8s backwards;}
#bannershopping365>a{color:#f00/*7f5*/;text-shadow:0px 7px 9px #000;float:left;padding-left:20px;padding-right:20px;}
#bannershopping365>a:hover{text-decoration:underline;color:#e00}
#bannershopping365>p>a{color:#f00 /*7f5*/;font-size:36px;text-shadow:0px 6px 9px #000;float:left;margin:25px;}
#bannershopping365>span{color:#f00;font-size:16px;}
#bannershopping365>span>a{top:50px;padding-left:30px;font-size:80px;color:#f00;text-shadow:0px 1px 4px #000;float:right;}
#bannershopping365>span>a:hover{color:#e00;text-shadow:0px 1px 5px #000;}

#header{position:fixed;top:0px;z-index:999;width:100%;height:20px;background-color:#fff;box-shadow:0px 1px 5px #999;}

#xemnhanhcuahang{padding:0;margin:0;color:#a00;float:left;font-weight:800;}
#productdetail{position:fixed;top:100px;left:100px;right:100px;bottom:50px;text-align:center;}
#map-canvas {position:fixed;width:100%;top:0;left:0;margin: 0px;padding-top:10px;overflow:hidden;-webkit-animation: appear 1.2s ease-in-out 1.2s backwards;-moz-animation: appear 1.2s ease-in-out 1.2s backwards;}
#viewproducts{position:fixed;height:100%;width:105%;top:0px;padding-top:20px;overflow-x:hidden;z-index:0;background:rgba(1,20,22,0.8);box-shadow:1px 1px 3px #000;border-radius:3px;-webkit-animation: appear 0.3s ease-in-out 0.3s backwards;-moz-animation: appear 0.3s ease-in-out 0.3s backwards;}
#switch1{position:fixed;bottom:30px;left:100px;}
#overlay-1{padding:10px;position:fixed;height: 100%;width:100%;top:0px;left:0px;margin: 0px;overflow-x:hidden;z-index:0;background:rgba(22,22,22,0.9);box-shadow:1px 1px 3px #000;border-radius:3px;}
#bannershop{color:#f00;font-size:70px;top:0px;z-index:900;text-shadow:1px 2px 3px #000;padding:10px 0px; background:rgba(0,0,0,0.2);-webkit-animation: appear 0.8s ease-in-out 0.8s backwards;-moz-animation: appear 0.8s ease-in-out 0.8s backwards;}
#bannershop>em{color:#eee;font-size:26px;text-shadow:1px 2px 3px #000;}
#url{font-size:30px !important;color:#fa0;padding:20px;text-shadow:1px 2px 3px #000;}
#url:hover{text-decoration:underline;color:#fa2;font-size:19px;}
#cellphone{color:#aff;font-size:30px;z-index:900;text-shadow:1px 2px 3px #000;padding:10px;margin:0;}
#index{width:100%;position:fixed;height:30px;top:0;left:0;text-align:center}
#chuyenmuc{position:fixed;top:210px;width:100%;left:0px;text-align:center;}
#chuyenmuc>a{box-shadow:0xp 5px 15px #000;margin:5px;font-size:15px;padding:8px 20px 8px 20px;background:rgba(17,17,22,0.1);color:#ddd;border:5px solid #ccc;text-shadow:0xp 1px 5px #000}
#chuyenmuc>a:hover{color:#fff;border:5px solid #fff}
.bodythoitrang{width:1000px;}
.empty-thoitrang{width:100%;clear:both;float:left;height:90px}
.body-s365{width:1000px;padding:0;margin:0;}
.menubar{position:relative;width:1000px;-webkit-animation: appear 1.4s ease-in-out 1s backwards;-moz-animation: appear 1.4s  ease-in-out 1s backwards;text-align:left;padding:4px 0}
.menubar>ul>li{display:inline;margin:0;padding:25px 0;position:relative}
.menubar>ul>li>a{font-size:17px !important;color:#ddd !important;text-shadow:0px 1px 3px #000;padding:25px 10px;}
.menubar>ul>li:hover a{color:#fff !important; text-decoration:underline !important}

.menubar>ul>li>ul{position:fixed;display:none;width:100%;padding-top:5px;padding-left:0;}
.menubar>ul>li:hover ul{display:block;}
.menubar>ul>li>ul>li{color:#000;display:inline;float:left;padding:16px 48px;box-shadow:0px 0px 1px #000;text-shadow:0px 0px 1px #000;
	background:rgba(255,255,255,0.6);
	background-image: -o-linear-gradient(to top, rgba(210,210,210,0.6) 0%, rgba(210,210,210,0.2)  100%);
	background-image: -moz-linear-gradient(to top, rgba(210,210,210,0.6) 0%, rgba(210,210,210,0.2)  100%);
	background-image: -webkit-linear-gradient(to top, rgba(210,210,210,0.6) 0%, rgba(210,210,210,0.2)  100%);
	background-image: -ms-linear-gradient(to top, rgba(210,210,210,0.6) 0%, rgba(210,210,210,0.2)  100%);
	background-image: linear-gradient(to top, rgba(210,210,210,0.6) 0%, rgba(210,210,210,0.2)  100%);
	margin-right:1px;position:relative;font-size:16px !important;color:#f00;
}
.menubar>ul>li>ul>li:hover{
	box-shadow:0px 1px 1px #000;text-decoration:underline !important
}
.menubar>ul>li>ul>li>a{font-size:14px !important;color:#000 !important;}
.menubar>ul>li>ul>li:hover a{text-decoration:underline !important;}
.menubar>ul>li>ul>li>ul{position:absolute;width:100%;display:none;padding:14px 0px;}
.menubar>ul>li>ul>li>ul>li{display:none;position:relative;left:-48px;background:rgba(200,200,200,0.6);padding:18px 30px;text-align:center !important;
	background-image: -o-linear-gradient(to top, rgba(200,200,200,0.6) 0%, rgba(200,200,200,0.2)  100%);
	background-image: -moz-linear-gradient(to top,rgba(200,200,200,0.6) 0%, rgba(200,200,200,0.2)  100%);
	background-image: -webkit-linear-gradient(to top,rgba(200,200,200,0.6) 0%, rgba(200,200,200,0.2)  100%);
	background-image: -ms-linear-gradient(to top,rgba(200,200,200,0.6) 0%, rgba(200,200,200,0.2)  100%);
	background-image: linear-gradient(to top,rgba(200,200,200,0.6) 0%, rgba(200,200,200,0.2)  100%);
}
.menubar>ul>li>ul>li>ul:hover li{display:block;}
.menubar>ul>li>ul>li>ul>li>a{font-size:14px !important;color:#000 !important;text-shadow:0px 0px 1px #000 !important;background-color:none;text-decoration:none !important;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.menubar>ul>li>ul>li>ul>li:hover a{color:#fff !important;text-shadow:0px 1px 1px #000 !important;text-decoration:underline !important;padding-left:5px;
-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.menubar>ul>li>ul>li>ul>li:hover{
	background-image: -o-linear-gradient(to top, rgba(100,100,100,0.6) 0%, rgba(100,100,100,0.2)  100%);
	background-image: -moz-linear-gradient(to top, rgba(100,100,100,0.6) 0%, rgba(100,100,100,0.2)  100%);
	background-image: -webkit-linear-gradient(to top, rgba(100,100,100,0.6) 0%, rgba(100,100,100,0.2)  100%);
	background-image: -ms-linear-gradient(to top, rgba(100,100,100,0.6) 0%, rgba(100,100,100,0.2)  100%);
	background-image: linear-gradient(to top, rgba(100,100,100,0.6) 0%, rgba(100,100,100,0.2)  100%);
}
.borderbottommenubar{height:5px;width:100%;float:left;background-color:red;box-shadow:0px 1px 3px #000;}

.head{background-color:#000;height:50px;box-shadow:1px 4px 5px #000;-webkit-animation: appear 0.6s ease-in-out 1s backwards;-moz-animation: appear 0.6s ease-in-out 1s backwards;}

.bg_img{width:100%;position:relative;top:0px;left:0px;bottom:0px;z-index:-2;}
.bg_img img{width:100%;height:100%;position:fixed;top:0px;left:0px;z-index:-2;}
.bg_img img#inner{width:100%;height:100%;position:fixed;top:0px;left:0px;z-index:-2;-webkit-animation: appear 0.6s ease-in-out 0.5s backwards;-moz-animation: appear 0.6s ease-in-out 0.5s backwards;}
			
h1 a{font-size:90px;right:50px;position:absolute;font-weight:100;bottom:40px;color:#f00;text-shadow:1px 2px 8px #000;z-index:2;}
			
h1 span{display:block;font-size:28px;color:#f00;text-shadow:1px 1px 3px #000;z-index:2;position:relative;bottom:50px;float:right;-webkit-animation: appear 0.6s ease-in-out 0.5s backwards;-moz-animation: appear 0.6s ease-in-out 0.5s backwards;}
	
p#info{color:#f00;font-size:22px;position:relative;text-shadow:0px 2px 5px #000;text-align:left;padding:20px}

h2{position:absolute;top:120px;left:150px;font-size:16px;color:#222;text-shadow:0px 1px 5px rgba(0,0,0,0.9);z-index:2;-webkit-animation: appear 0.6s ease-in-out 0.5s backwards;-moz-animation: appear 0.6s ease-in-out 0.5s backwards;}

#search1{position:fixed;width:380px;bottom:-80px;right:50px;text-align:center;-webkit-animation: appear 0.6s ease-in-out 6s backwards;-moz-animation: appear 0.6s ease-in-out 6s backwards;}		

.oe_overlay{background:#000;opacity:0;position:fixed;top:0px;left:0px;width:100%;height:100%;}

ul.oe_menu{list-style:none;position:fixed;top:10px;left:100px;width:1200px;float:left;clear:both;z-index:1000;-webkit-animation: appear 0.6s ease-in-out 1s backwards;-moz-animation: appear 0.6s ease-in-out 1s backwards;}

ul.oe_menu>li{width:112px;height:101px;float:left;position:relative;z-index:1000;}

ul.oe_menu>li>a{display:block;background-color:#f00;opacity:0.4;color:#fff;text-decoration:none;text-align:center;font-size:16px;width:100%;height:100%;padding:10px;margin:1px;text-shadow:0px 1px 2px rgba(0,0,0,0.9);opacity:0.8;border-radius:10px 0px 100px 0px;box-shadow:0px 5px 5px rgba(0,0,0,0.9);-webkit-transition:border-radius 1s ease;-moz-transition:border-radius 1s ease;transition:border-radius 1s ease;z-index:1000;}
ul.oe_menu > li > a:hover,ul.oe_menu>li.selected>a{background-color:#000;color:#af0;opacity:1.0;text-decoration:underline;border-radius:0px 10px 0px 100px;-webkit-transition:border-radius 1s ease;-moz-transition:border-radius 1s ease;transition:border-radius 1s ease;}
.oe_wrapper ul.hovered>li>a{z-index:100;}

ul.oe_menu div{position:absolute;top:103px;left:1px;width:498px;height:180px;padding:20px;display:none;z-index:100;}

li.oe_heading{color:#f00;font-size:16px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #fff;}
ul.oe_menu > li > ul{display:none;background-color:#000;opacity:0.9;box-shadow:0px 3px 12px #000;border:20px solid transparent;width:200%;}
ul.oe_menu > li > ul>li{color:#fff;font-size:16px;width:100%;height:100%;}
ul.oe_menu > li > ul>li>a:hover{color:#fff}
ul.oe_menu > li > ul>li>a{font-size:15px;color:#af0;font-weight:normal !important;width:100%;height:100%;}
ul.oe_menu >li:hover ul{display:block;}

.options{position:absolute;top:28%;width:100%;text-align:center;margin:0;padding:0;-webkit-animation: appear 0.6s ease-in-out 1s backwards;-moz-animation: appear 0.6s ease-in-out 1s backwards;}
.options>center>ul{width:250px}
.options>center>ul>li{width:250px;margin:0px;margin:5px;}
.options>center>ul>li>a{font-size:23px;color:#af0;text-shadow:1px 2px 6px #000;padding:20px 40px 20px 40px;width:200px}
.options>center>ul>li:hover a{color:#f00;margin-left:2px;}

.taikhoan{position:fixed;width:100%;top:40%;left:0;text-align:center;-webkit-animation: appear 1s ease-in-out 1s backwards;-moz-animation: appear 1s ease-in-out 1s backwards;}
.taikhoan>a:hover{box-shadow:1px 1px 6px #000;text-shadow:1px 2px 4px #000;}
.taikhoan>a{color:orange;font-size:30px;padding:30px 50px 30px 50px;border:10px solid orange;box-shadow:1px 2px 8px #000;text-shadow:1px 3px 6px #000;}

/* flash */

.trangtaikhoan{padding-top:100px;position:fixed;height:100%;width:100px;left:0;bottom:0;-webkit-animation: appear 1s ease-in-out 1s backwards;-moz-animation: appear 1s ease-in-out 1s backwards;}
.trangtaikhoan:hover{/*background-color:#000*/;box-shadow:0px 2px 5px #000;}
.trangtaikhoan:hover a{display:block}
.trangtaikhoan>a{padding:5px 0px 5px 10px;color:#ddd;text-shadow:0px 2px 3px #000;font-size:18px;display:none}
.trangtaikhoan>a:hover{color:#f00;text-shadow:0px 1px 2px #000;bottom:49px;}

.container{
	width: 100%;
	position:fixed;
	overflow:hidden;
}

.clr{
	clear: both;
}

.toolbar{position:fixed;top:200px;left:50%}

h1.main{
	font-size: 30px;
	position:relative;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
    padding: 10px;
	text-align: center;
	z-index: 1000;
	-webkit-animation: appear 0.6s ease-in-out 6s backwards;
	-moz-animation: appear 0.6s ease-in-out 6s backwards;
}
/* Header Style */
.header{
	line-height: 24px;
	font-size: 11px;
	background: #000;
	opacity: 0.9;
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	width:1000px;
	text-align:center;
	-moz-box-shadow: 1px 0px 2px #000;
	-webkit-box-shadow: 1px 0px 2px #000;
	box-shadow: 1px 0px 2px #000;
}
.header a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #ddd;
	display: block;
	float: left;
}
.header a:hover{
	color: #fff;
}
.header span.right{
	float: right;
}
.header span.right a{
	float: none;
	display: inline;
}
p.demos{
    position:relative;
    z-index: 1000;
	padding: 4px;
	text-align: center;
	-webkit-animation: appear 0.6s ease-in-out 6.2s backwards;
	-moz-animation: appear 0.6s ease-in-out 6.2s backwards;
}
p.demos a{
    display: inline-block;
	padding: 2px 4px;
	background: #fff;
	color: #777;
	font-family:'Arial Narrow', Arial, sans-serif;
	text-transform: uppercase;
	font-size: 11px;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
p.demos a:hover{
    color: #fff;
	background: #555;
}
p.demos a.current-demo,
p.demos a.current-demo:hover{
    font-weight: bold;
	background: #333;
	color: #fff;
}
@-webkit-keyframes appear{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-moz-keyframes appear{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

h1.main,p.demos {
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	-ms-animation-delay: 8s;
	animation-delay: 8s;
}

.scrollbar{-webkit-animation: appear 0.6s ease-in-out 1s backwards;
	-moz-animation: appear 0.6s ease-in-out 1s backwards;}

.sp-container {
	width:100%;
	text-align:center;
	position:absolute;
	font-weight: 100;
	text-align:right;
}
.sp-content {
	height: 500px;
	top:-30px;
	left:-50px;
	position: relative;
	-webkit-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
	-moz-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
	-ms-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
	animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
}
.sp-content:after {
	content: '';
	width: 4px;
	height: 100%;
	position: absolute;
	left: 0px;
}
.sp-container h2 {
	color:orange;
	font-size:28px;
	text-shadow: 0px 1px 3px rgba(0,0,0,0.8);
}

.sp-container h2:hover {
	text-shadow: 0px 1px 4px rgba(0,0,0,0.9);
	opacity:3;
}	

.sp-container h2 a{
	color:#f00;
	text-shadow: 0px 2px 5px #000;
	-webkit-transition:color 5s ease;
	-moz-transition:color 5s ease;
	transition: color 5s ease;
}

.sp-container h2:hover a{
	color:orange;	
	-webkit-transition:color 5s ease;
	-moz-transition:color 5s ease;
	transition: color 5s ease;

}

.sp-wrap {
	width: 550px;
	padding: 0px 0;
	height: 100%;
	text-align: left;
	line-height:80px;
	float: left;
	position: relative;
	overflow: hidden;
}
.sp-wrap span {
	display: block;
	/*background: #ffdd00;*/
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
.sp-wrap span.sp-mid {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 2;
}

.sp-wrap span.sp-mid {
	font-weight:100 !important;
	text-transform: uppercase;
	font-size: 100px;
	line-height:90px;
	position: relative;
}
.sp-left span.sp-top {
	-webkit-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
	-moz-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
	-ms-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
	animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
}
.sp-left span.sp-mid {
	-webkit-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
	-moz-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
	-ms-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
	animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
}
.sp-left span.sp-bottom {
	-webkit-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
	-moz-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
	-ms-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
	animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
}
.sp-wrap i {
	position: absolute;
	/*background: #ffdd00;*/
	width: 30px;
}
.sp-wrap i:first-child {
	color: #000;
}
.sp-wrap i:last-child {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-animation: fadeOut 1s linear 6s backwards;
	-moz-animation: fadeOut 1s linear 6s backwards;
	-ms-animation: fadeOut 1s linear 6s backwards;
	animation: fadeOut 1s linear 6s backwards;
}

/**/
@-webkit-keyframes open{
	0%{
		-webkit-transform: scale(1,0);
	}
	100%{
		-webkit-transform: scale(1,1);
	}
}
@-webkit-keyframes squeeze{
	0%{
		height: 300px;
	}
	100%{
		height: 220px;
	}
}
@-webkit-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-webkit-keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-webkit-keyframes slideLeft{
	0%{
		-webkit-transform: translateX(120%);
	}
	100%{
		-webkit-transform: translateX(0%);
	}
}
@-webkit-keyframes slideRight{
	0%{
		-webkit-transform: translateX(-120%);
	}
	100%{
		-webkit-transform: translateX(0%);
	}
}
@-webkit-keyframes moveUp{
	0%{
		-webkit-transform: translateY(0px);
	}
	100%{
		-webkit-transform: translateY(-170px);
	}

}
@-webkit-keyframes zoomIn{
	0%{
		-webkit-transform: scale(0);
	}
	100%{
		-webkit-transform: scale(1);
	}
}
/**/
@-moz-keyframes open{
	0%{
		-moz-transform: scale(1,0);
	}
	100%{
		-moz-transform: scale(1,1);
	}
}
@-moz-keyframes squeeze{
	0%{
		height: 400px;
	}
	100%{
		height: 120px;
	}
}
@-moz-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@-moz-keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-moz-keyframes slideLeft{
	0%{
		-moz-transform: translateX(120%);
	}
	100%{
		-moz-transform: translateX(0%);
	}
}
@-moz-keyframes slideRight{
	0%{
		-moz-transform: translateX(-120%);
	}
	100%{
		-moz-transform: translateX(0%);
	}
}
@-moz-keyframes moveUp{
	0%{
		-moz-transform: translateY(0px);
	}
	100%{
		-moz-transform: translateY(-170px);
	}

}
@-moz-keyframes zoomIn{
	0%{
		-moz-transform: scale(0);
	}
	100%{
		-moz-transform: scale(1);
	}
}
/**/
@keyframes open{
	0%{
		transform: scale(1,0);
	}
	100%{
		transform: scale(1,1);
	}
}
@keyframes squeeze{
	0%{
		height: 400px;
	}
	100%{
		height: 120px;
	}
}
@keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes slideLeft{
	0%{
		transform: translateX(120%);
	}
	100%{
		transform: translateX(0%);
	}
}
@keyframes slideRight{
	0%{
		transform: translateX(-120%);
	}
	100%{
		transform: translateX(0%);
	}
}
@keyframes moveUp{
	0%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(-170px);
	}

}
@keyframes zoomIn{
	0%{
		transform: scale(0);
	}
	100%{
		transform: scale(1);
	}
}

/*-  scroll bar -*/

.scrollbar{
	 position: fixed;
    bottom: 0px;
    left: 100px;
    list-style: none;
    z-index:9999;
}
 a.back{
            width:256px;
            height:73px;
            position:fixed;
            bottom:15px;
            right:15px;
            background:#fff url(codrops_back.png) no-repeat top left;
        }
        .scroll{
            width:133px;
            height:61px;
            position:fixed;
            bottom:15px;
            left:150px;
            background:#fff url(scroll.png) no-repeat top left;
        }
        .info{
            text-align:right;

        }
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    bottom:0px;
    left: 100px;
    list-style: none;
    z-index:0;
}
ul#navigation li{
    width: 120px;float:left;text-align:center;position:relative;
}

ul#navigation li:hover{border-radius:0px 10px 0px 0px;}

ul#navigation>li>a{
    display: block;
    margin-left: -2px;
    width: 120px;
    height: 55px;    
    background-color:red;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #333;
	border-radius:0px 10px 0px 0px;
    -moz-border-radius:0px 10px 0px 0px;
	-webkit-border-radius:0px 10px 0px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
	-webkit-transition:height 1s ease;
	-moz-transition:height 1s ease;
	transition: height 1s ease;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
	color:#fff;
	font-weight:800;
	font-size:13px;
	padding:15px 0px 0px 0px;
}

ul#navigation>li>a:hover{
	background-color:#000;
	color:#fff;
	background-image: url(a.png);
	 text-decoration:underline;
	height:80px;
	-webkit-transition:height 1s ease;
	-moz-transition:height 1s ease;
	transition: height 1s ease;
}

.container2{
	position:fixed;
	bottom:0px;
	left:100px;
	display:none;
}




/* --  MENU BLUR --*/
#menublur{position:fixed;top:160px;width:100%;text-align:center;-webkit-animation: appear 0.6s ease-in-out 0.5s backwards;-moz-animation: appear 0.6s ease-in-out 0.5s backwards;}

.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 30wpx;
    display: block;
}
.bmenu li a{
	color: transparent #092;
	-webkit-font-smoothing: antialiased;
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 5px #fff;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bmenu:hover li a{
	text-shadow: 0px 1px 5px #111;
}
.bmenu li a:hover{
	color: #096;
	text-shadow: 0px 0px 1px #000;
	padding-left: 10px;
}